<!-- DEMO1 -->
<!-- <style>
    .container{
        display: flex;
        height: 100%;
        width: 100%;
    }

    .item{
         flex:1;
        text-align:center;
        font-size: 50px;
        border:1px solid red;
    }

</style>

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>  -->

<!-- DEMO2 -->
<!-- <style>
    .container{
        display: flex;
        height: 300px;
        width: 100%;
        align-content:center;
        flex-wrap: wrap;
        border: 1px solid black;
    }

    .item{
        width: 100px;
        height: 100px;
        text-align:center;
        font-size: 50px;
        border:1px solid red;
    }

</style>

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
</div>  -->

<!-- DEMO3 -->
<!-- <style>
    .container{
        display: flex;
        height: 300px;
        width: 100%;
        align-content:center;
        align-items: center;
        flex-wrap: wrap;
        border: 1px solid black;
    }

    .item{
        width: 100px;
        height: 100px;
        text-align:center;
        font-size: 50px;
        border:1px solid red;
    }

    .item2{
        width: 150px;
        height: 150px;
        text-align:center;
        font-size: 50px;
        border:1px solid red;
    }

</style>

<div class="container">
    <div class="item">1</div>
    <div class="item2">2</div>
    <div class="item">3</div>
    <div class="item2">4</div>
    <div class="item">5</div>
    <div class="item2">6</div>
    <div class="item">7</div>
</div>  -->

<!-- DEMO4  -->
  <!-- <style>
    .container{
        display: flex;
        height: 300px;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        border: 1px solid black;
    }

    .item{
        width: 100px;
        height: 100px;
        text-align:center;
        font-size: 50px;
        border:1px solid red;
    }
</style>

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>    -->

<!-- DEMO5  -->
  <!-- <style>
    .container{
        display: flex;
        height: 300px;
        width: 100%;
        flex-direction: column;
        flex-wrap: wrap;
        border: 1px solid black;
    }

    .item{
        width: 100px;
        height: 100px;
        text-align:center;
        font-size: 50px;
        border:1px solid red;
    }
</style>

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>    -->

<!-- DEMO6  -->
<style>
    .container{
        display: flex;
        height: 300px;
        width: 100%;
         flex-wrap: wrap; 
        border: 1px solid black;
    }

    .container > div {
        text-align:center;
        font-size: 50px;
    }

    .item-a{
        flex-grow: 1;
        height: 100px;
        background: red;
        order: 2;
    }

    .item-b{
        flex-grow: 1;
        height: 100px;
        background: yellow;
    }

    .item-c{
        flex-grow: 1;
        width: 100px;
        height: 200px;
        background: green;
        order: 2;
        
    }

    .item-d{
        flex-grow: 1;
        min-width: 600px;
        width: 200;
        height: 100px;
        flex-basis:400px;
        background: blue;
        order: 2;
        
    }

    .item-e{
        flex-grow: 1;        
        width: 100px;
        height: 100px;
        background: purple;
        order: 2;
    }
</style>

<div class="container">
    <div class="item-a">a</div>
    <div class="item-b">b</div>
    <div class="item-c">c</div>
    <div class="item-d">d</div>
    <div class="item-e">e</div>
</div>    
